<template>
  <div class="roomdiv">
    <el-card class="favatar">
      <div class="demo-fit">
        <div class="block">
          <el-avatar shape="square" :size="140" fit="fill" :src="imgUrl"></el-avatar>
        </div>
      </div>
      <hr>
      <!--<el-button type="primary" @click="centerDialogVisible = true" style="margin-top: 10px">修改头像</el-button>-->
      <el-upload
        class="upload-demo"
        ref="upload"
        :action="fileUpload.url"
        :data = 'fileUpload.data'
        :auto-upload="false"
        :on-success="file_success"
        :on-error="file_erorr"
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >

        <el-button slot="trigger" size="mini" type="primary" style="float: left">修改头像</el-button>
        <el-button size="mini" type="success" round @click="goToUpdateAvatar">上  传</el-button>
      </el-upload>
    </el-card>
    <el-card class="box-card">
      <div slot="header">
        <span>个人信息</span>
      </div>
      <el-form :model="form" :rules="rules" ref="ruleForm">

        <el-form-item label="今日在线时间（分钟)"  prop="collage">
          <el-input v-model="form.dtime"  disabled></el-input>
        </el-form-item>
        <el-form-item label="总在线时间（分钟）"  prop="major">
          <el-input v-model="form.ttime"  disabled></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="form.realName" disabled></el-input>
        </el-form-item>

        <el-form-item label="用户名"  prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="生日" >
          <el-input v-model="form.birthdate" disabled autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="电话"  prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="大学"  prop="collage">
          <el-input v-model="form.collage"></el-input>
        </el-form-item>
        <el-form-item label="专业"  prop="major">
          <el-input v-model="form.major"></el-input>
        </el-form-item>

        <el-form-item style="padding-left: 120px">
          <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  let pre = 'http://localhost:8888/user/getUserLogo?path='
  let url = 'http://localhost:8888/';
  export default {
    data() {
      var validatePhoto = (rule, value, callback) => {
        if (value !== '' && !(/^1[3456789]\d{9}$/.test(value))) {
          callback(new Error('手机号格式不正确'));
        } else {
          callback();
        }
      };
      var validateEmail = (rule, value, callback) => {
        if (value !== '' && !(/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/).test(value)) {
          callback(new Error('邮箱格式不正确'));
        } else {
          callback();
        }
      };
      return {
        imgUrl: '',
        fileUpload:{url:url+'user/fileUpload',data:{id:1}},
        fileList:[],
        form: this.$store.state.user,
        rules: {
          email: [
            {validator: validateEmail, trigger: 'blur'}
          ],
          photo: [
            {validator: validatePhoto, trigger: 'blur'}
          ],
        },

      }
    },
    methods:{
      submitForm(formName) {
        console.log(JSON.stringify(this.form))
        this.$refs[formName].validate((valid) => {
          if (valid){
            this.$http
              .get(url + "user/updateUser", {params: {user: JSON.stringify(this.form)}})
              .then(result => {
                this.$message({
                  type: 'success',
                  message: '修改成功！！'
                });
              }, function () {
                this.$message({
                  type: 'error',
                  message: '修改失败！'
                });
              });
          } else {
            return false;
          }
        });
      },

      goToUpdateAvatar(){
        //修改头像请求
        this.$refs.upload.submit();
      },

      submit(){ //手动触发上传
        this.$refs.upload.submit(); // 上传文件
      },
      handleExceed(){
        this.$message.warning('仅允许上传一个文件！')
      },
      file_success: function(file){
        this.$message.success('发送上传请求');
        this.imgUrl=pre+file
        let suser = this.$store.state.user
        suser.avatar = file;
        this.$store.commit('updateUser',suser)
        this.fileList = []
      },
      file_erorr(){
        this.$message.error('上传失败！');
      },

    },
    mounted() {
      if(this.$store.state.user.avatar===null||this.$store.state.user.avatar===''){
        this.imgUrl = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      }else{
        this.imgUrl = pre+this.$store.state.user.avatar
      }
      this.fileUpload.data = {id:this.$store.state.user.id}


    }
  }
</script>

<style scoped>

  .upload-demo{
    margin: 10px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: red;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: red;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    margin-left: 80px;

  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    margin-left: 80px;
  }
  .favatar {
    position: absolute;
    width: 180px;
    margin: 6px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .box-card {
    width: 1000px;
    margin: 8px auto;

  }
</style>
